<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>

    <div class="company-info">
      <div class="left-sidebar">
        <h3>客服服务</h3>
        <ul class="menu">
          <router-link :to="{ path: './notice' }">
            <li class="active">业务须知</li>
          </router-link>
          <router-link :to="{ path: './process' }">
            <li>服务流程</li>
          </router-link>
          <router-link :to="{ path: './faq' }">
            <li>汽车保养FAQ</li>
          </router-link>
        </ul>
        <div class="contact-info">
          <div class="contact-item">
            <img src="@/assets/images/202004011028126d577b.png" alt="咨询热线" class="contact-icon" />
          </div>
          <div class="contact-item">
            <img src="@/assets/images/20200401105022f62918.png" alt="邮箱" class="contact-icon" />
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="breadcrumb">
          <h4>汽车养护</h4>
          <div style="display: flex">
            <router-link :to="{ path: '/' }">
              <li class="active">首页</li>
            </router-link>>客户服务>汽车养护
          </div>
        </div>
        <!-- 新增新闻列表部分 -->
        <div class="news-list">
          <div>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;1、正常使用爱车，不过度超速、超载，避免快速加速、尽可能以匀速驾驶。
            </p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;2、定期维护保养。事实证明，汽车的维修保养对汽车的排放质量很重要。有的车出厂时排放合格，但使用过程中会出现这样那样的问题，需要维护保养，使自己的车处于一个良好的运行状态。维修保养不及时，就会由于高排放导致更多的污染。如：勤查汽车点火系统、及时发现渗漏、检查阻气门、检查空气管道、使用清洁的过滤器、避免燃烧机油、避免使用低档润滑油等。
            </p>
            <P>
              &nbsp;&nbsp;&nbsp;&nbsp;OBD系统出现故障后及时修理。一年一次的车检对控制汽车排放作用是有限的。但汽车安装了OBD之后就完全不一样了，它可以随时监测汽车的排放水平。如果一旦排放不达标，OBD就会发出警告，及时通知驾驶者去修理。欧Ⅲ最关键的就是使用OBD。
            </P>
            <P> &nbsp;&nbsp;&nbsp;&nbsp;3、正确用油，使用清洁燃料。</P>
            <P> &nbsp;&nbsp;&nbsp;&nbsp;4、不乱改车辆而导致排放异常。 </P>
            <P>
              &nbsp;&nbsp;&nbsp;&nbsp;5、选择“绿色轮胎”。所谓“绿色轮胎”也称环保轮胎或低污染轮胎。</P>
            <P>
              &nbsp;&nbsp;&nbsp;&nbsp;“绿色”主要表现在在不失其原有良好抓地力表现的情况下，轮胎滚动时保持低阻力，从而减少燃油消耗与车辆尾气排放，有效地保护环境。早在上世纪90年代，轮胎工程师发现，如果使用特殊处理的二氧化硅取代传统碳黑作为胎面橡胶的补强材料，不仅可以减少轮胎中碳黑以及芳烃油等致癌物质通过轮胎磨损而污染空气，同时轮胎滚动阻力也会变小，油耗降低，废气排放减少，并产生更大的环保效应。
            </P>
            <P> &nbsp;&nbsp;&nbsp;&nbsp;6、车辆要按时报废和更新。</P>
            <P>
              &nbsp;&nbsp;&nbsp;&nbsp;7、减少车内污染影响。不要随意对车内进行装饰；不用劣质车载香水或空气清新剂；遇到严重堵车，或跟随尾气排放可能超标车辆行驶时，应关闭车窗，把空调、暖风开关调到车内自循环模式；经常检查一下发动机盖和底盘是否漏气，当发现车内有废气泄漏时，不宜打开空调，更不要开着空调在车内睡觉，以免发生危险；空调在使用时会吸进很多灰尘，形成污垢，时间一长，发生霉变，再通过空调散发至车内，在车上很容易吸入体内，每隔一段时间，将空调开到最大挡，吹上半小时可以有效杜绝灰尘积聚；注意把进气口附近的物品搬走，确保空气流通正常等。
            </P>
          </div>
          <div style="text-align: right;">
            <img src="http://www.wltjx.com/xcfaq/uploadfile/image/20150624/20150624145422_71811.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const newsList = ref([
  {
    title: "安心汽车延保服务",
    description: "为您的爱车提供全方位的保障...",
    image: "@/assets/images/news1.jpg",
  },
  {
    title: "延保期内客户车辆出现故障怎么办？",
    description: "当您的车辆出现问题时，我们提供快速响应服务...",
    image: "@/assets/images/news2.jpg",
  },
  {
    title: "汽车延保该不该买？",
    description: "详细解析汽车延保的优势与必要性...",
    image: "@/assets/images/news3.jpg",
  },
]);
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
  color: #333;
}

.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }

  .company-info {
    display: flex;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;

    .left-sidebar {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        color: #c66b00;
        font-size: 22px;
        font-weight: 700;
      }

      .menu {
        list-style: none;
        padding: 0;
        text-align: center;

        li {
          padding: 10px 15px;
          cursor: pointer;
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 0 30px;
      text-align: center;

      .breadcrumb {
        margin-bottom: 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px;

        h4 {
          color: #333;
          margin: 0;
        }
      }

      .news-list {
        text-align: left;
      }
    }
  }

  .service-features {
    display: flex;
    // gap: 20px;
    // flex-wrap: wrap;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;

    .feature_flex {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: 30px;
      padding-left: 5%;
      padding-right: 5%;

      .feature-item {
        flex: 1 1 calc(50% - 40px);
        min-width: 200px;
        border-radius: 8px;
        padding: 10px;

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}
</style>
